<!DOCTYPE html>
<html>
<head>
    <title>Ceadeal 后台管理系统</title>
    <#include "../common/head.ftl"/>
    <link rel="stylesheet" href="/plugin/editor.md/css/editormd.min.css" />
    <style type="text/css">
        .title{ font-weight:bold; margin-bottom:10px !important; }
        #article-wrapper{ margin:0 !important; }
    </style>
</head>
<body class="cw-body">
<div id="page-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            文章管理
            <small>&nbsp;</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="/main"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li class="active">文章管理</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Your Page Content Here -->
        <ul class="nav nav-tabs">
            <li role="presentation"><a href="/article/list">列表</a></li>
            <#if article.id??>
                <li role="presentation"><a href="/article/edit">新增</a></li>
                <li role="presentation" class="active"><a href="#">编辑</a></li>
                <#else>
                <li role="presentation" class="active"><a href="#">新增</a></li>
            </#if>
            <!-- /... -->
        </ul>

        <form id="form1" name="form1" method="post">
        <input type="hidden" name="id" value="${(article.id)!}" />
        <div class="row">
            <div class="col-md-12">
                <!-- box 1 -->
                <div class="box box-primary box-no-margin-bottom">
                    <div class="box-header with-border">
                        <h3 class="box-title"><i class="fa fa-pencil"></i>&nbsp;文章编辑</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                        </div>
                    </div>
                    <div class="box-body">
                        <input  style="margin:0px" type="text" name="title" class="form-control title" placeholder="请输入文章标题" value="${(article.title)!}" maxlength="128" autocomplete="off"/>
                        <div id="article-wrapper" style="padding:0px; min-height:500px">
                            <textarea id="article-content" name="content">${(article.content)!}</textarea>
                        </div>
                    </div>
                    <div class="box-footer with-border">
                        <button type="button" id="btn_ok" class="btn btn-success btn-control"><i class="fa fa-check"></i>&nbsp;提&nbsp;交</button>&emsp;
                        <button type="button" id="btn_back" class="btn btn-default btn-control"><i class="fa fa-arrow-left"></i>&nbsp;返&nbsp;回</button>
                    </div>
                </div>
                <!-- /.box -->
            </div>
        </div>
        </form>

    </section>
    <!-- /.content -->
</div>

<!-- REQUIRED JS SCRIPTS -->
<#include "../common/script-common.ftl"/>
<!-- jQuery validate -->
<script src="/plugin/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/plugin/jquery-validation/dist/localization/messages_zh.js"></script>
<script src="/js/cdl-validate.js"></script>
<script src="/plugin/editor.md/editormd.min.js"></script>
<script>
    var _form = $("#form1");
    var _editor;

    $(function(){
        _editor = editormd({
            id          : "article-wrapper",
            width       : "100%",
            height      : 550,
            placeholder : "请输入文章内容",
            emoji       : true,
            path        : "/plugin/editor.md/lib/",
            autoHeight  : false,
            onfullscreen : function() {
                $(".box-footer").hide();
            },
            onfullscreenExit : function() {
                $(".box-footer").show();
            }
        });

        $("#btn_ok").click(function(){
            if(!_form.valid()){
                return;
            }
            bootboxConfirm("确认要提交信息吗？", function(result){
                if (result) {
                    $("#avatarHidden").val($("#img-avatar").attr("src"));
                    _form.attr("action", "/article/save");
                    _form.submit();
                }
            });
        });

        $("#btn_back").click(function(){
            location.href = "/article/list";
        });

        _form.validate({
            rules: {
                'title': {required: true, minlength:2}
            }
        });
    });
</script>
</body>
</html>